<template>
  <div id="OrderList">
    <div class="content">
      <div class="overflow-auto">
        <div class="menu">
          <Menu></Menu>
        </div>
        <div class="orderBody">
          <div class="top">
            <div class="left">
              <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                <el-tab-pane :label="item.label" :name="item.name" v-for="(item) in tabsArr" :key="item.name">
                  <span slot="label">{{ item.label }}
                    <span v-if="item.num" class="overViewNnum"> {{ item.num }}</span>
                  </span>
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
          <div class="orderForm">
            <!-- 筛选部分 -->
            <Screen :overview="getListData['overview']" @change_getData="change_getData" @reset="resetTable"
              @openExport="openExport"></Screen>
            <!-- 筛选部分 -->
            <!-- height="calc(100% - 40px)"  -->
            <el-table :key="orderkey" border ref="exportTable" :data="OrderData"
              :header-cell-style="{ background: '#f6f8ff', color: '#303133' }" style="width: 100%;"
              :span-method="objectSpanMethod">
              <el-table-column style="color:#0486fe" label="订单号/渠道订单号" width="240" align="center">
                <template slot-scope="scope">
                  <div type="text" style="color:#0486fe" @click="openDrawer(scope.row)">{{ scope.row.order_no }}</div>
                </template>
              </el-table-column>
              <el-table-column prop="channel" label="渠道" align="center">
              </el-table-column>
              <el-table-column prop="name" label="联系人" align="center">
              </el-table-column>
              <el-table-column prop="phone" label="手机号" align="center">
              </el-table-column>
              <el-table-column prop="room_title" label="房型" align="center">
              </el-table-column>
              <el-table-column prop="room_num" label="房间号" align="center">
              </el-table-column>
              <el-table-column prop="start_date" label="入住时间" align="center">
              </el-table-column>
              <el-table-column prop="end_date" label="离店时间" align="center">
              </el-table-column>
              <el-table-column prop="status" label="入住状态" align="center">
              </el-table-column>
              <el-table-column prop="price" label="房费" align="center">
              </el-table-column>
              <el-table-column prop="checkout_status" label="结账状态" align="center">
              </el-table-column>
              <el-table-column prop="order_price" label="订单总金额" align="center">
              </el-table-column>
              <el-table-column prop="create_time" label="创建时间" width="180" align="center">
              </el-table-column>
            </el-table>
            <div class="pagination">
              <pagination :data="pageNation_data" @size-change="handleSizeChange" @current-change="handleCurrentChange">
              </pagination>
            </div>

          </div>
        </div>
      </div>
    </div>

    <OrderDFill :fillData.sync="fillData" @success_edit="editSuccess"></OrderDFill>
    <OrderDetail :detailData.sync="detailData" @open_fillOrder="openFillOrder"></OrderDetail>
    <ExportTable now_export="dindan" :tableHeaders="tableHeaders" :tableScreen="tableScreen"
      :drawerVisible_Table="drawerVisible_Table" @update:drawerVisible_Table="handleDrawerVisible_Table">
    </ExportTable>
  </div>
</template>

<script>
import Menu from '../../components/Menu'
import Screen from '../../../../components/screen/screen.vue'
import Pagination from '../../../../components/PaginationPage/Pagination.vue'
import OrderDetail from '../../../../components/myOrderDrawer/OrderDetail/Detail.vue'
import OrderDFill from '../../../../components/myOrderDrawer/OrderFill/Fill.vue'
import ExportTable from '../../../../components/exportTable/exportTable.vue'

export default {
  name: 'OrderList',
  components: {
    Menu,
    Screen,
    Pagination,
    OrderDetail,
    OrderDFill,
    ExportTable
  },
  data() {
    return {
      hotel_id: sessionStorage.getItem('hotel_id'),
      OrderData: [],
      orderkey: true,//表格key值

      pageNation_data: {
        total: 0,
        currentPage: 1,
        currentSize: 10,
        small: false
      },// 传递分页组件的数据
      detailData: {
        isOpen_out_drawer: false,
        order_id: null,
        order_status: null,
        refresh: false,
        name: null,
        detail: null,
      },//传递给订单详情组件的数据
      fillData: {
        isShow_drawer: false,
        name: null,
        orderData: {},
        fill_order_title_show: null,
        selectOperated: null
      },// 传递填写组件的数据
      refresh: true,//用于刷新订单详情组件得订单数据

      // 导出明细组件
      tableHeaders: [],
      tableScreen: [],
      drawerVisible_Table: false,


      tabsArr: [
        {
          label: '全部',
          name: 'all',
          num: 0,
        },
        {
          label: '今日预抵',
          name: 'arrivals',
          num: 0,
        },
        {
          label: '今日预离',
          name: 'leave',
          num: 0,
        },
        {
          label: '今日新办',
          name: 'new',
          num: 0,
        },
        {
          label: '未排房',
          name: 'not_assign',
          num: 0,
        },
        {
          label: '待处理',
          name: 'not_handel',
          num: 0,
        },
      ],
      roomType: [],//房型
      channelOptions: [
        {
          channel_id: 0,
          name: '全部',
        },
        {
          channel_id: 1,
          name: '本地',
        },
        {
          channel_id: 2,
          name: '携程',
        },
        {
          channel_id: 3,
          name: '途家',
        },
        {
          channel_id: 4,
          name: 'Booking',
        },
        {
          channel_id: 5,
          name: '小红书',
        },],//渠道选择器
      overview: 'all',
      // 筛选的请求数据
      getListData: {
        hotel_id: sessionStorage.getItem('hotel_id'),
        page: 1,
        page_rows: 10,
        search_word: null,//搜索关键字
        search_type: null,//搜索类型 order_no:搜索订单号，room_num：房间号，name:客户名称，phone:客户手机号，remarks：备注
        channel_id: null,//来源渠道
        checkout_status: null,//结账状态 0 全部 1 欠款 2结清 3多收
        room_status: null,//房间入住状态 1：已预订，2：已入住，3：已取消，4 已退房
        room_id: null,//房型
        start_date: null,//开始时间
        end_date: null,//结束时间
        time_type: null,//时间类型 in_time：入住时间，out_time：离店时间，create_time：订单创建时间
        is_hour_room: null,//0全日房，1钟点房，其它null
        overview: 'all',//all, 预离：leave，预抵：arrivals， 新办： new， 未排房：not_assign, 待处理： not_handel
      },
      // tab选项卡绑定数据
      activeName: 'all',
    }
  },
  created() {
    this.GetOrderList()
    this.getOverviewNum()
    this.getAllRoom()//获取所有房型
  },
  methods: {
    /**
    * 导出明细按钮
    */
    openExport() {
      if (this.OrderData.length == 0) {
        this.$message.warning('没有可导出的数据！')
        return
      }
      // 时间类型
      let time_type = this.getListData.time_type
      let searchType = this.getListData.search_type
      let checkoutStatus = this.getListData.checkout_status
      let roomStatus = this.getListData.room_status
      let timeTypeText = time_type == 'create_time' ? '创建时间' : time_type == 'in_time' ? '入住时间' : time_type == 'out_time' ? '离店时间' : '全部'
      let searchTypeText = searchType == 'order_no' ? '订单号' : searchType == 'room_num' ? '房间号' : searchType == 'name' ? '客户名称' : searchType == 'phone' ? '客户手机号' : searchType == 'remarks' ? '备注' : '全部'
      let checkoutStatusText = checkoutStatus == 1 ? '欠款' : time_type == 2 ? '结清' : time_type == 3 ? '多收' : '全部'
      let roomStatusText = roomStatus == 1 ? '已预订' : roomStatus == 2 ? '已入住' : roomStatus == 3 ? '已取消' : roomStatus == 4 ? '已退房' : '全部'

      // 房型
      let room_Title = ''
      this.roomType.forEach(item => {
        if (item.id == this.getListData.room_id) {
          room_Title = item.pms_title
        }
      })
      let channel_Title = ''
      // 获取渠道
      this.channelOptions.forEach(item => {
        if (item.channel_id == this.getListData.channel_id) {
          channel_Title = item.name
        }
      })

      const tableHeaders = Array.from(this.$refs.exportTable.$el.querySelectorAll('th')).map(header => header.innerText).filter(item => item != '');
      const tableScreen = [
        ['搜索关键字', this.getListData.search_word ? this.getListData.search_word : '全部', this.getListData.search_word],
        ['搜索类型', searchTypeText ? searchTypeText : '全部', this.getListData.search_type],
        ['来源渠道', channel_Title ? channel_Title : '全部', this.getListData.channel_id],
        ['结账状态', checkoutStatusText ? checkoutStatusText : '全部', this.getListData.checkout_status],
        ['入住状态', roomStatusText ? roomStatusText : '全部', this.getListData.room_status],
        ['房型', room_Title ? room_Title : '全部', this.getListData.room_id],
        ['开始时间', this.getListData.start_date ? this.getListData.start_date : '全部', this.getListData.start_date],
        ['结束时间', this.getListData.end_date ? this.getListData.end_date : '全部', this.getListData.end_date],
        ['时间类型', timeTypeText ? timeTypeText : '全部', this.getListData.time_type],
      ]
      console.log(tableHeaders, 'tableHeaders');
      console.log(tableScreen, 'tableScreen');
      this.tableHeaders = tableHeaders  // 报表字段
      this.tableScreen = tableScreen  // 筛选字段
      this.drawerVisible_Table = true;
    },
    // 更新父组件的抽屉状态 导出明细
    handleDrawerVisible_Table(value) {
      this.drawerVisible_Table = value;
    },
    /**
     * 点击订单号 打开订单详情
     * @param {*} row  当前点击的行信息
     */
    openDrawer(row) {
      this.detailData.order_id = row.id
      this.detailData.order_status = row.status == '已预订' ? 6 : row.status == '已入住' ? 7 : row.status == '已退房' ? 8 : row.status == '已取消' ? 9 : 0
      this.detailData.isOpen_out_drawer = true
      this.detailData.name = 'order'
      console.log(row, '当前点击的行信息');
    },


    /**
     * 订单修改成功
     */
    editSuccess(detail) {
      console.log(detail, 'detail');
      this.fillData.isShow_drawer = false
      this.detailData.detail = detail
    },
    /**
    * 
    * 1 关闭订单详情组件， 
    * 2 将值传递给填写订单组件 
    * 3 订单组件监听到值得变化之后，触发数据转换事件
    * 4 打开填写订单组件
    * 
    */
    openFillOrder(data) {
      console.log(data, '打开填写订单页面');
      // this.detailData.isOpen_out_drawer = false//关闭订单详情组件
      this.fillData.orderData = data
      this.fillData.fill_order_title_show = 2
      this.fillData.isShow_drawer = true
      this.fillData.name = 'order'
    },




    // 获取今日概览数
    getOverviewNum() {
      let data = {
        hotel_id: this.hotel_id,
        data: new Date()
      }
      console.log(data, '获取今日概览数');
      this.my_request('supplier/hotel-pms/overview', data, 'GET').then(res => {
        let { code, data } = res.data
        if (200 == code) {
          for (const key in data) {
            this.tabsArr.forEach(item => {
              if (item.name == key) {
                item.num = data[key]
              }
              if (item.name == 'leave') {
                item.num = data['Leave']
              }
            })
          }
        }
        console.log(res);
      })
    },

    // 点击头部tab选项卡
    handleClick(tab) {
      console.log(tab.name);
      this.getListData.overview = tab.name
      this.GetOrderList(this.getListData)
    },

    /* 表格合并列和行 */
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 10 || columnIndex === 11 || columnIndex === 12) {
        const _row = this.flitterData(this.OrderData).one[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },

    // 合并表格的第一列，处理表格数据
    flitterData(arr) {
      let spanOneArr = [];
      let concatOne = 0;
      arr.forEach((item, index) => {
        if (index === 0) {
          spanOneArr.push(1);
        } else {
          //注意这里的quarterly是表格绑定的字段，根据自己的需求来改
          if (item.order_no === arr[index - 1].order_no) {
            //第一列需合并相同内容的判断条件
            spanOneArr[concatOne] += 1;
            spanOneArr.push(0);
          } else {
            spanOneArr.push(1);
            concatOne = index;
          }
        }
      });
      return {
        one: spanOneArr,
      };
    },
    handleSizeChange(val) {
      // 处理每页数量改变的逻辑
      console.log(`每页 ${val} 条`);
      this.pageNation_data.currentSize = val
      this.GetOrderList(this.getListData)
    },
    handleCurrentChange(val) {
      // 处理当前页码改变的逻辑
      console.log(`当前页: ${val}`);
      this.pageNation_data.currentPage = val
      this.GetOrderList(this.getListData)
    },
    // 改变了筛选数据
    change_getData(val) {
      this.getListData = val
      this.GetOrderList(val)
      console.log(val, '改变了筛选数据');
    },
    //重置表格
    resetTable(val) {
      this.GetOrderList()
      this.getListData = {
        hotel_id: sessionStorage.getItem('hotel_id'),
        page: 1,
        page_rows: 10,
        search_word: null,//搜索关键字
        search_type: null,//搜索类型 order_no:搜索订单号，room_num：房间号，name:客户名称，phone:客户手机号，remarks：备注
        channel_id: null,//来源渠道
        checkout_status: null,//结账状态 0 全部 1 欠款 2结清 3多收
        room_status: null,//房间入住状态 1：已预订，2：已入住，3：已取消，4 已退房
        room_id: null,//房型
        start_date: null,//开始时间
        end_date: null,//结束时间
        time_type: null,//时间类型 in_time：入住时间，out_time：离店时间，create_time：订单创建时间
        is_hour_room: null,//0全日房，1钟点房，其它null
        overview: 'all',//all, 预离：leave，预抵：arrivals， 新办： new， 未排房：not_assign, 待处理： not_handel
      }
      console.log(this.getListData, ' this.getListData');
    },
    /**
     * 获取订单列表
     * 当传值时说明筛选了表格
     * @param {*} key 改变的字段
     * @param {*} val 改变的字段值
     */
    GetOrderList(screenDate) {
      let data = {
        hotel_id: sessionStorage.getItem('hotel_id'),
        page: this.pageNation_data.currentPage,
        page_rows: this.pageNation_data.currentSize,
        search_word: null,
        search_type: null,
        channel_id: null,
        checkout_status: null,
        room_status: null,
        room_id: null,
        start_date: null,
        end_date: null,
        time_type: null,
        is_hour_room: null,//0全日房，1钟点房，其它null
        overview: null,//all, 预离：leave，预抵：arrivals， 新办： new， 未排房：not_assign, 待处理： not_handel
      }
      if (screenDate) {
        data = screenDate
      }
      console.log(data, '筛选表格数据');
      this.my_request('supplier/hotel-pms-order', data, "GET").then(res => {
        console.log(res, '获取表格数据结果')
        let { code, data } = res.data
        if (200 == code) {
          this.pageNation_data.total = data.total
          this.OrderData = data.list
          this.orderkey = !this.orderkey
        }
      })
    },
    // 获取所有房型
    getAllRoom() {
      let data = {
        hotel_id: sessionStorage.getItem('hotel_id')
      }
      this.my_request('supplier/hotel/room/pms', data, "GET").then(res => {
        let { code, data } = res.data
        // console.log(data, '获取所有房型');
        if (200 == code) {
          this.roomType = data
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped src="./OrderList.scss"></style>
